<template>
  <div class="bg_write" style="position:relative;">
    <el-row>
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
        <el-col :span="12"></el-col>
      </el-col>
    </el-row>
    <el-row class="home">
      <el-col :span="24" class="home_box">
        <div class="phone">
          <div class="phone_top">
            <img src="./../../assets/img/home/phone_header.png" alt />
          </div>
          <div class="sign_top">
            <div class="top_bj">
              <img src="./../../assets/img/home/sign_topbj2.jpg" alt />
            </div>
            <div class="top_content">
              <span>兑换 ></span>
              <p>我的积分</p>
              <p>8952</p>
              <div class="top_btn">签到领积分</div>
              <p>
                <van-icon name="clock-o" />
                距离下次签到:{{hour}}:{{min}}:{{sec}}
              </p>
            </div>
            <div class="sign_welfare">
              <p>
                <span>"</span>
                日常金币福利
                <span>"</span>
              </p>

              <div class="welfare_title">
                <p>签到领金币</p>
                <p>
                  <span>签到提醒</span>
                  <el-switch v-model="is_sign_warn" active-color="#a9a0fb" inactive-color="#eeeeee"></el-switch>
                </p>
              </div>
              <div class="welfare_content">
                <div class="welfare_bj">
                  <img src="./../../assets/img/home/sign_step.png" alt />
                </div>
                <div class="welfare_box" @click="control_show(1)">
                  <div class="welfare_item" v-for="(item,i) in sign_list" :key="i">
                    <div class="welfare_1">
                      <img v-if="i <= 2" src="./../../assets/img/home/sign_round1.png" alt />
                      <img v-else-if="i <= 5" src="./../../assets/img/home/sign_round2.png" alt />
                      <img v-else-if="i <= 6" src="./../../assets/img/home/sign_present.png" alt />
                      <p>+{{item.value}}</p>
                    </div>
                    <div class="welfare_2">
                      <img src="./../../assets/img/home/sign_success.png" alt />
                    </div>
                    <div class="welfare_3">
                      <p>6.13</p>
                    </div>
                  </div>
                </div>
                <div class="index_control" v-show="sign_reward">
                  <div
                    class="control_item control_sanjiao on welfare_control"
                    style="margin-top: -120px;"
                  >
                    <p>
                      设置连续签到时间奖励类型：
                      <el-select
                        v-model="sel_send"
                        @change="sel_send_change(sel_send.value)"
                        size="small"
                        style="width: 100px;margin-left: 20px"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in send_options"
                          :key="item.value"
                          :label="item.label"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </p>
                    <el-form
                      :inline="true"
                      class="check_control_form reward_form"
                      :model="sign_reward_form "
                    >
                      <el-form-item :label="item.title +'：'" v-for="(item,i) in sign_list" :key="i">
                        <el-input
                          v-model="item.value"
                          size="small"
                          style="width: 100px"
                          @change="sign_value_change(item.iden,item.value)"
                        ></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="sign_task">
            <div class="sign_task_content" @click="control_show(2)">
              <div class="sign_task_item" v-for="item in task_list " :key="item.id">
                <div class="sign_task_left">
                  <img src="./../../assets/img/home/sign_icon1.png" alt />
                </div>
                <div class="sign_task_middle">
                  <p>{{item.title}}</p>
                  <p>
                    <img src="./../../assets/img/home/sign_reward.png" alt />
                    +{{item.value}}
                  </p>
                </div>
                <div class="sign_task_right">
                  <button>立即完成</button>
                </div>
              </div>
            </div>
            <div class="index_control index_head" v-show="sign_task">
              <div class="control_item control_sanjiao on" style="margin-top: 160px;">
                <el-form class="check_control_form">
                  <!-- <p>请填写完成下面任务所得积分，如果为0则不开放该任务</p> -->
                  <div class="task_form_item" v-for="(task_item,i) in task_list" :key="i">
                    <div class style="width: 100%">
                      <el-row>
                        <el-col :span="16" style="text-align: left">
                          <el-form-item label="任务名称：" label-width="100px">
                            <el-col :span="24">{{task_item.title}}</el-col>
                          </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12">
                          <el-form-item label="奖励金额：" label-width="100px">
                            <el-col :span="12">
                              <el-input
                                v-model="task_item.value"
                                size="small"
                                placeholder="奖励金额"
                                @change="sign_value_change(task_item.iden,task_item.value)"
                              ></el-input>
                            </el-col>
                            <el-col :span="12">
                              <el-select
                                v-model="task_item.help"
                                size="small"
                                @change="task_reward_change(task_item.iden,task_item.help)"
                                placeholder="请选择金额类型"
                              >
                                <el-option
                                  v-for="item in send_options"
                                  :key="item.id"
                                  :label="item.label"
                                  :value="item.value"
                                ></el-option>
                              </el-select>
                            </el-col>
                          </el-form-item>
                        </el-col> -->
                        <el-col :span="4" style="text-align: left">
                          <el-form-item label="是否开启：" label-width="100px">
                            <el-col :span="24">
                              <el-switch
                                :width="82"
                                v-model="task_item.is_open"
                                active-color="#13ce66"
                                inactive-color="#999999"
                                active-value="1"
                                @change="task_is_open(task_item.iden,task_item.is_open)"
                                inactive-value="0"
                              ></el-switch>
                            </el-col>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import myUpload from "@/components/currency/MyUpload.vue";
import upcard from "@/components/currency/IndexSet_upload.vue";
export default {
  name: "check_in", //签到页
  components: {
    HeadTitle,
    myUpload,
    upcard
  },
  data() {
    return {
      task_list: [],
      send_options: this.$store.state.rewardOption,
      sel_send: [],
      label_val: {},
      sign_reward_form: {
        //连续签到奖励
      },
      sign_reward: true, //  连续签到奖励窗口
      task: "task",
      sign_list: [],
      task_List: {
        banner: [
          {
            piclink: "", //icon
            task_name: "", //任务名
            task_reward: "", //奖励多少
            reward_type: "", //奖励类型
            is_open: false //是否开启
          }
        ]
      },
      formLabelWidth: "120px",
      sign_task: false,
      is_sign_warn: true, //是否提醒
      hour: "",
      min: "",
      sec: ""
    };
  },
  created() {
    this.get_time(); //倒计时
    this.get_sign_list();
    this.get_task_list(); //得到任务列表
  },
  methods: {
    task_reward_change(iden, e) {
      //任务奖励类型改变
      var params = {};
      params.iden = iden;
      params.help = e;
      this.$api.getSettings.updateMissPay(params).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功！");
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    task_is_open(iden, e) {
      //任务是否开启改变
      var params = {};
      params.iden = iden;
      params.is_open = e;
      this.$api.getSettings.updateMissCheck(params).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功！");
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    get_task_list() {
      //得到任务列表
      var params = {};
      params.cate = "news_mission";
      this.$api.getSettings.getNewTask(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1) {
          var form = {};
          this.task_list = res.data.result;
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    sel_send_change(val) {
      console.log(val);
      this.$api.getPage.sel_sign_type({ help: val }).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    sign_value_change(iden, val) {
      var params = {
        iden: iden,
        value: val
      };
      params[iden] = val;
      this.$api.getPage.setting_sign_gigt(params).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    control_show(num) {
      if (num == 1) {
        this.sign_reward = true;
        this.sign_task = false;
      } else if (num == 2) {
        this.sign_reward = false;
        this.sign_task = true;
      }
    },
    get_banner_id(val) {},
    getSendDel() {},
    get_sign_list() {
      //连续签到送积分
      this.$api.getPage.get_sign_gift({ cate: "sign_get_jf" }).then(res => {
        if (res.data.code == 200) {
          this.sign_list = res.data.result;
        } else {
        }
      });
    },

    addNumber(num) {
      var num = num > 9 ? num : "0" + num;
      return num;
    },
    get_time() {
      var that = this;
      var endYear = new Date().getFullYear();
      var endMonth = new Date().getMonth() + 1;
      var endDay = new Date().getDate();
      var endTime = new Date(endYear, endMonth, endDay);
      var leftDiv = function() {
        var leftTime = endTime - new Date().getTime();
        var leftHours = that.addNumber(
          Math.floor((leftTime / 1000 / 60 / 60) % 24)
        );
        var leftMinutes = that.addNumber(
          Math.floor((leftTime / 1000 / 60) % 60)
        );
        var leftSeconds = that.addNumber(Math.floor((leftTime / 1000) % 60));
        that.hour = leftHours;
        that.min = leftMinutes;
        that.sec = leftSeconds;
        if (leftTime > 0) {
          setTimeout(function() {
            leftDiv();
          }, 500);
        } else {
          clearTimeout(leftDiv());
        }
      };
      leftDiv();
    }
  },
  filters: {
    change_label(val) {
      console.log(this.sel_send);
      this.sel_send.forEach(item => {
        console.log("!!", item);
      });
    }
  },
  watch: {
    sel_send(val) {},
    sign_list(val) {
      var temp = this.sign_list[0].help;
      this.send_options.forEach(item => {
        if (temp == item.value) {
          this.sel_send = item;
        }
      });
    }
  }
};
</script>

<style scoped>
@import "../../assets/css/page.css";
.transitionBody > div {
  overflow: auto !important;
}
</style>